<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <label for="id">ID:
                <input type="text" v-model = "id" id="id">
            </label>
            <label for="name">Name
                <input type="text" v-model = "name" id="name">
            </label>

            <input type="button" value="添加" @click = "add">
        </div>
        <!-- 注意：v-for循环的时候，key属性只能使用 number获取string -->
        <!-- 注意: key使用的时候，必须使用v-bind属性绑定的形式，指定key的值 -->
        <!-- 在组件中，使用v-for指令循环的时候，或在特殊情况中，如果v-for有问题，必须在使用v-for的时候指定唯一的字符串/数组类型:key值 -->
        <p :key = "item.id" v-for = "item in list">
            <input type="checkbox" name="" id="">
            {{item.id}}--
            {{item.name}}
        </p>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                id:'',
                name:'',
                list:[
                    {id: 1, name:"张三"},
                    {id: 2, name:"李四"},
                    {id: 3, name:"王五"},
                    {id: 4, name:"赵六"}
                ]
            },
            methods: {
                add() {  //添加数据
                    //尾部追加
                    // this.list.push({id:this.id, name:this.name})
                    //头部追加
                    this.list.unshift({id:this.id, name:this.name})
                }
            }
        })
    </script>
</body>
</html>